<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<link rel="stylesheet" type="text/css" href="swiper.min.css"/>
	<link rel="stylesheet" type="text/css" href="qwqwqw.css"/>
	<link rel="stylesheet" type="text/css" href="jiti.css"/>
	<link rel="stylesheet" type="text/css" href="./iconfont.css" />
	<link rel="stylesheet" type="text/css" href="lleftright.css"/>
	<body style="100%">
		<div id="box">
			<img src="IMAGE/meet-your-growers_growers-cover-1920x880.jpg" style="width: 100%;height:700px;position: absolute;">
			<div class="box1 qwqw">
				<a href="#" id="toggle"></a>
				<span class="span sspan"></span>
				<span class="span2 sspan"></span>
				<span class="span3 sspan"></span>
			
				<img class="tu1" src="https://www.belluccipremium.com/assets/images/logo-bellucci.svg">
				<div id="boox">
					<a class="aa" href="#" style="width: 50px;">产品展示
						<p></p>
					</a>
					<a class="aa" href="#" style="width: 60px;margin-left: 20px;">商店定位器
						<p></p>
					</a>
					<a class="aa" href="#" style="width: 30px;margin-left: 20px;">联系
						<p></p>
					</a>
				</div>
			</div>
			<div id="box_div">
				<h1>认识你的种植者</h1>
				<i class="iconfont icon-angledown-copy" style="font-size: 65px;margin-left:200px;color: #F8F8FF;"></i>
			</div>
			
		</div>
		<div id="box3">
			<div id="box3_div1">
				<b>意大利是我们的故乡，</b>
				我们所有人都在耕种这片土地。
				我们将自己视为地球的管家，
				我们希望创造更美好的未来-这就是我们继续实行小规模农业的原因
				。它更具可持续性，并有助于维护我们乡村的健康和完整性。
			</div>
			<div id="box3_div2">
				我们的橄榄树很小
				，属于家族所有，
				因此我们与合作社合作，
				为您带来可持续发展的特级初榨橄榄油，
				并带有我们家的浓郁正宗风味。
				我们以EVOO的质量和口味而感到自豪，
				这就是为什么我们可以轻松确定您的独特瓶子的产地。
			</div>
		</div>
		
		<div id="box4">
			<div id="box4_div1">
				<div id="box4_div2">
					<img src="IMAGE/ladder-ico.png" >
				</div>
				<div id="box4_div3">
					<h2 style="font-size: 26px;font-weight: 300;margin-left: 20px;margin-top: 35px;">认识种植食物的家庭农民</h2>
					<input type="text" placeholder="按家庭或地区查找" style="width: 587px;height: 53px;border:solid 0px #000000;border-bottom:solid #000000 1px;background-color: whitesmoke;margin-left: 20px;font-size: 16px;margin-top: 25px;"/>
					<i class="iconfont icon-fangdajing" style="position: absolute;left: 570px;top: 115px;"></i>
					<ul>
						<li>选定地区：</li>
						<li>托斯卡纳</li>
						<li>普利亚大区</li>
						<li>西西里岛</li>
					</ul>
				</div>
			</div>
		</div>
		
		<div id="box5">
			<div id="box55">
				<div id="box5_div1">
					<div id="box5_div2" class="box5_div2">
						<ul class="box5_ul1">
							<li>
								<img src="img/giuseppe-turturro.jpg" >
								<p>朱塞佩·特图罗（Giuseppe Turturro）</p>
								<span></span>
								<p style="font-size: 16px;">普利亚五代磨坊主</p>
							</li>
							<li>
								<img src="img/gaetano-cuomo.jpg" >
								<p>加埃塔诺·库莫（Gaetano Cuomo）</p>
								<span></span>
								<p style="font-size: 16px;">普利亚让我们成为我们</p>
							</li>
							<li>
								<img src="img/antonio-albanese.jpg" >
								<p>安东尼奥·阿尔巴尼斯（Antonio）</p>
								<span></span>
								<p style="font-size: 16px;">Corato的美味Coratina</p>
							</li>
						</ul>
						<ul class="box5_ul1">
							<li>
								<img src="img/franco-rappio.jpg" >
								<p>佛朗哥·拉皮奥（Franco Rappio）</p>
								<span></span>
								<p style="font-size: 16px;">普利亚大区-非常适合橄榄</p>
							</li>
							<li>
								<img src="img/riccardo-and-emanuele-montereale.jpg" >
								<p>Riccardo和Emanuele Montereale</p>
								<span></span>
								<p style="font-size: 16px;">大自然在普利亚等您</p>
							</li>
							<li>
								<img src="img/spione-francesco.jpg" >
								<p>斯潘妮·弗朗切斯科</p>
								<span></span>
								<p style="font-size: 16px;">遵循我们的橄榄之路</p>
							</li>
						</ul>
					</div>
					<div id="box5_div2" class="box5_div2">
						<ul class="box5_ul1">
							<li>
								<img src="IMAGE/santo-bono.jpg" >
								<p>Santo Bono</p>
								<span></span>
								<p style="font-size: 16px;">与橄榄树一起成长</p>
							</li>
							<li>
								<img src="IMAGE/calogero-family.jpg" >
								<p>卡洛格罗家族</p>
								<span></span>
								<p style="font-size: 16px;">西西里岛的2代橄榄种植</p>
							</li>
							<li>
								<img src="IMAGE/giacomo-bono.jpg" >
								<p>贾科莫·波诺（Giacomo Bono）</p>
								<span></span>
								<p style="font-size: 16px;">西西里风味</p>
							</li>
						</ul>
						<ul class="box5_ul1">
							<li>
								<img src="IMAGE/dimino-family.jpg" >
								<p>迪米诺家族</p>
								<span></span>
								<p style="font-size: 16px;">西西里人的遗产</p>
							</li>
							<li>
								<img src="IMAGE/basile-basile.jpg" >
								<p>巴西勒</p>
								<span></span>
								<p style="font-size: 16px;">这是西西里人的家庭事</p>
							</li>
							<li>
								<img src="IMAGE/barco-sisters.jpg" >
								<p>巴可姐妹</p>
								<span></span>
								<p style="font-size: 16px;">里面的所有美女</p>
							</li>
						</ul>
					</div>
					<div id="box5_div2" class="box5_div2">
						<ul class="box5_ul1">
							<li>
								<img src="IMAGE/santarelli-brothers.jpg" >
								<p>圣塔雷利兄弟</p>
								<span></span>
								<p style="font-size: 16px;">一年四季的爱情工作</p>
							</li>
							<li>
								<img src="IMAGE/leonardo-and-lorenzo-piras.jpg" >
								<p>莱昂纳多和洛伦佐·皮拉斯</p>
								<span></span>
								<p style="font-size: 16px;">从父亲到儿子</p>
							</li>
							<li>
								<img src="IMAGE/valentina-and-giuliano-donato.jpg" >
								<p>瓦伦蒂娜（Valentina）和朱利亚诺·多纳托（Giuliano Donato）</p>
								<span></span>
								<p style="font-size: 16px;">地方的骄傲</p>
							</li>
						</ul>
						<ul class="box5_ul1" >
							<li>
								<img src="IMAGE/emiliano-marrucchi.jpg" >
								<p>埃米利亚诺·马鲁奇（Emiliano Marrucchi）</p>
								<span></span>
								<p style="font-size: 16px;">生命之树</p>
							</li>
							<li>
								<img src="IMAGE/falciani-siblings.jpg" >
								<p>法西亚尼兄弟姐妹</p>
								<span></span>
								<p style="font-size: 16px;">大地的味道</p>
							</li>
							<!-- <li>
								<img src="img/antonio-albanese.jpg" >
								<p>安东尼奥·阿尔巴尼斯（Antonio）</p>
								<span></span>
								<p style="font-size: 16px;">Corato的美味Coratina</p>
							</li> -->
						</ul>
					</div>
					<div id="box5_div2" class="box5_div2">
						<ul class="box5_ul1">
							<li>
								<img src="img/giuseppe-turturro.jpg" >
								<p>朱塞佩·特图罗（Giuseppe Turturro）</p>
								<span></span>
								<p style="font-size: 16px;">普利亚五代磨坊主</p>
							</li>
							<li>
								<img src="img/gaetano-cuomo.jpg" >
								<p>加埃塔诺·库莫（Gaetano Cuomo）</p>
								<span></span>
								<p style="font-size: 16px;">普利亚让我们成为我们</p>
							</li>
							<li>
								<img src="img/antonio-albanese.jpg" >
								<p>安东尼奥·阿尔巴尼斯（Antonio）</p>
								<span></span>
								<p style="font-size: 16px;">Corato的美味Coratina</p>
							</li>
						</ul>
						<ul class="box5_ul1">
							<li>
								<img src="img/franco-rappio.jpg" >
								<p>佛朗哥·拉皮奥（Franco Rappio）</p>
								<span></span>
								<p style="font-size: 16px;">普利亚大区-非常适合橄榄</p>
							</li>
							<li>
								<img src="img/riccardo-and-emanuele-montereale.jpg" >
								<p>Riccardo和Emanuele Montereale</p>
								<span></span>
								<p style="font-size: 16px;">大自然在普利亚等您</p>
							</li>
							<li>
								<img src="img/spione-francesco.jpg" >
								<p>斯潘妮·弗朗切斯科</p>
								<span></span>
								<p style="font-size: 16px;">遵循我们的橄榄之路</p>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div id="box5_div3">
				<p class="iconfont icon-angle-left-solid"></p>
				<p class="iconfont icon-angle-right-solid"></p>
			</div>
		</div>
		
		<div id="box7">
			<ul class="box7_ul1">
				<li style="width: 65px;">产品展示
					<p></p>
				</li>
				<li style="width: 113px;">意大利100%EVOO
					<p></p>
				</li>
				<li style="width: 65px;">有机EVOO
					<p></p>
				</li>
				<li style="width: 177px;">SACHET 100％意大利EVOO
					<p></p>
				</li>
				<li style="width: 113px;">SACHET有机EVOO
					<p></p>
				</li>
				<li style="width:153px;">SICILIA PGI有机EVOO
					<p></p>
				</li>
				<li style="width: 146px;">托斯卡纳PGI EVOO
					<p></p>
				</li>
			</ul>
			<ul class="box7_ul2">
				<li style="width: 112px;">意大利是我的家
					<p></p>
				</li>
				<li style="width: 112px;">贝鲁奇应用程序
					<p></p>
				</li>
				<li style="width: 50px;">倒更多
					<p></p>
				</li>
				<li style="width: 80px;">完全可追溯
					<p></p>
				</li>
				<li style="width: 65px;">到达食谱
					<p></p>
				</li>
			</ul>
			<ul class="box7_ul3">
				<li style="width: 32px;">联系<p></p>
				</li>
				<li style="width: 80px;">商店定位器<p></p>
				</li>
				<li style="width: 65px;">获奖情况<p></p>
				</li>
			</ul>
		</div>
		
		
		
		
		
		<div id="box10">
			<div id="box10_div1">
				<span class="iconfont icon-chacha" style="font-size: 40px;position:absolute;top: 10px;left: 30px;"></span>
				<img class="tu1" src="https://www.belluccipremium.com/assets/images/logo-bellucci.svg" style="margin-left: 90px;">
			</div>
			<div id="box10_div2">
				<div id="box10_div2_div">
					<ul class="box10_div2_ul1 xz">
						<li style="width: 215px;">意大利是我家<p></p>
						</li>
						<li style="width: 245px;margin-left: 145px;">贝鲁奇应用程序<p></p>
						</li>
						<li style="width: 110px;margin-left: 145px;">苍老师<p></p>
						</li>
					</ul>
					<ul class="box10_div2_ul2 xz">
						<li style="width: 180px;">完全可追溯<p></p>
						</li>
						<li style="width: 145px;margin-left: 166px;">到达食谱<p></p>
						</li>
					</ul>
				</div>
			</div>
			<img src="https://www.belluccipremium.com/uploads/seals/italy-flag.jpg" style="margin: 0 auto;display: block;">
			<ul class="list">
				<li style="width: 60px;margin-left: 535px;"><a href="#">联系</a></li>
				<li style="width: 110px;"><a href="#">商店定位器</a></li>
				<li style="width: 96px;"><a href="#">获奖情况</a></li>
			</ul>
			<div id="box10_div3">
				<img src="img/bellucci-app-logo.png" style="width: 85px;height: 26px;margin-left: 90px;">
				<img src="img/未命名_副本.jpg" style="margin-left: 240px;">
				<ul style="position: relative;left: 640px;top: -97px;">
					<li class="li10">意大利</li>
					<li class="li10">西班牙</li>
					<li class="li10">墨西哥</li>
					<li>美国</li>
				</ul>
			</div>
		</div>
		
		
		<div id="box8">
			<p>该网站可能使用一些“cookies”来改善您的浏览体验。请在继续浏览我们的网站之前，建议您阅读COOKIES政策。</p>
			<div>
				<span></span>
				<a href="#">接受</a>
			</div>
		</div>
		<div class="box9 box1">
		
		</div>
		<script src="swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="new_file.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			$("#box2_div5").animate({
				"width":860
			},9000)
			
			setInterval(function(){
				if(parseInt($("#box2_div5").width())>=860){
					$("#box2_div5").width(0)
					$("#box2_div5").animate({
						"width":860
					},9000)
				}
			},0)
			
			
			$(".aa").hover(function() {
				$(this).children("p").show()
				var aa = $(this).width()
				$(this).children("p").stop(true).animate({
					"width": aa
				}, 350)
				console.log($(this).children("p"))
			}, function() {
				var aa = $(this).width()
				$(this).children("p").stop(true).animate({
					"width": 0
				}, 350)
			})
			
			
			
			$("#box5 li").hover(function() {
				var aa = $(this).find("p").eq(0).width()
				$(this).children("span").stop(true).animate({
					"width": aa
				}, 350)
			}, function() {
				var aa = $(this).width()
				$(this).children("span").stop(true).animate({
					"width": 0
				}, 350)
			})
			
			
			
			
			
			
			
			
			var cont=0
			$(".icon-angle-left-solid").click(function(){
				// if($("#box5_div1").is(":animated")){
				// 	return false
				// }
				cont++
				if(cont==4){
					$("#box5_div1").css({"left":0})
					cont=1
				}
				
				$("#box5_div1").stop(true).animate({"left":-1280*cont},500)
				
				console.log(cont)
				
				
				
			})
			
			
			$(".icon-angle-right-solid").click(function(){
				cont--
				// if($("#box5_div1").is(":animated")){
				// 	return false
				// }
				if(cont==-1){
					$("#box5_div1").css({
						"left":-3840
					})
					cont=3
				}
				$("#box5_div1").stop(true).animate({"left":-1280*cont},500)
			})
			
			$("#toggle").hover(function() {
				console.log(1)
				$(this).stop(true).animate({
					opacity: 1
				}, 250)
			}, function() {
				$(this).stop(true).animate({
					opacity: 0
				}, 250)
			})
			
			$(".sspan").hover(function() {
				$("#toggle").stop(true).animate({
					opacity: 1
				}, 250)
			}, function() {
				$("#toggle").stop(true).animate({
					opacity: 0
				}, 250)
			})
			
			
			
			
			
			
			
			
			
			$("#toggle").click(function() {
			
				$("#box10").animate({
					"left": 0 + "%"
				}, 500)
			
			})
			
			$(".sspan").click(function() {
			
				$("#box10").animate({
					"left": 0 + "%"
				}, 500)
			
			})
			
			
			$(".iconfont").click(function() {
				$("#box10").animate({
					"left": -100 + "%"
				}, 500)
			})
			
			$(".box7_ul1 li").hover(function() {
				var aa = $(this).width()
				$(this).children("p").stop(true).animate({
					"width": aa
				}, 350)
				console.log($(this).children("p"))
			}, function() {
				var aa = $(this).width()
				$(this).children("p").stop(true).animate({
					"width": 0
				}, 350)
			})
			
			$(".box7_ul2 li").hover(function() {
				var aa = $(this).width()
				$(this).children("p").stop(true).animate({
					"width": aa
				}, 350)
				console.log($(this).children("p"))
			}, function() {
				var aa = $(this).width()
				$(this).children("p").stop(true).animate({
					"width": 0
				}, 350)
			})
			
			
			$(".box7_ul3 li").hover(function() {
				var aa = $(this).width()
				$(this).children("p").stop(true).animate({
					"width": aa,
					"height": "2px"
				}, 350)
				console.log($(this).children("p"))
			}, function() {
				var aa = $(this).width()
				$(this).children("p").stop(true).animate({
					"width": 0
				}, 350)
			})
			
			$("#box8 div").hover(function() {
				var $div = $(this).width()
				var i = 0;
				$("#box8 div span").stop(true).animate({
					"width": $div
				}, 250)
			}, function() {
				var $div = $(this).width()
				$("#box8 div span").stop(true).animate({
					"width": 0
				}, 250)
			})
			
			
			
			$("#box4_div3 li:not(li:first)").click(function(){
				var $li=$(this).html()
				$("#box4_div3").find("input").val($li)
			})
			
			
			
			var $box9 = $(".box9")
				var $box1 = $(".qwqw").html()
				$(document).ready(function() {
					var p = 0,
						t = 0;
			
					$(window).scroll(function(e) {
						p = $(this).scrollTop();
						if (t <= p) { //向下滚
							$box9.html($box1)
							$box9.hide()
						} else { //向上滚
							$box9.show()
							
							console.log($(".box9 span"))
							$(".box9 .sspan").hover(function() {
								$(".box9 #toggle").stop(true).animate({
									opacity: 1
								}, 250)
							}, function() {
								$(".box9 #toggle").stop(true).animate({
									opacity: 0
								}, 250)
							})
			
			
							$(".box9 #toggle").hover(function() {
								console.log(1)
								$(this).stop(true).animate({
									opacity: 1
								}, 250)
							}, function() {
								$(this).stop(true).animate({
									opacity: 0
								}, 250)
							})
			
							$(".box9 .aa").hover(function() {
								$(this).children("p").show()
								var aa = $(this).width()
								$(this).children("p").stop(true).animate({
									"width": aa
								}, 350)
								console.log($(this).children("p"))
							}, function() {
								var aa = $(this).width()
								$(this).children("p").stop(true).animate({
									"width": 0
								}, 350)
							})
							
							$(".box9 #toggle").click(function() {
							
								$("#box10").stop(true).animate({
									"left": 0 + "%"
								}, 500)
							
							})
							
							$(".box9 .sspan").click(function() {
							
								$("#box10").stop(true).animate({
									"left": 0 + "%"
								}, 500)
							
							})
							
							$(".iconfont").click(function() {
								$("#box10").stop(true).animate({
									"left": -100 + "%"
								}, 500)
							})
							
						}
						setTimeout(function() {
							t = p;
						}, 0);
						if (p == 0) {
							$box9.css({
								"display": "none"
							})
						}
					});
				});
			
			$("#box10_div3 ul li:last").mouseover(function(){
				$(this).prevAll("li").css({"opacity":1})
			})
			$("#box10_div3 ul").mouseleave(function(){
				$(this).find(".li10").css({"opacity":0})
				})
				
				$(".xz li").hover(function() {
					
					var aa = $(this).width()
					console.log($(this).children("p"),aa)
					$(this).children("p").stop(true).animate({
						"width": aa
					}, 350)
				}, function() {
					var aa = $(this).width()
					$(this).children("p").stop(true).animate({
						"width": 0
					}, 350)
				})
				
				    
				
		</script>
	</body>
</html>
